<template>
    <div>
        <input type="text" v-if="isShow" placeholder="输点东西嗖嗖" ref="myIpt">
        <button v-else @click="btn">搜索</button>
    </div>
</template>

<script>
export default {
data () {
    return {
        isShow:false
    }
},
methods: {

    // 使用 async和await 将他改变成同步流程
    //之前nexttick中通过异步解决问题
    async btn(){
        this.isShow=true
        // DOM异步更新的不能马上获取DOM  (只是局限于v-if)
       /*  this.$nextTick(()=>{
            //this.$refs.myIpt.focus();//js主动触发focus事件 让点击完按钮 就将焦点锁定在光标上
        }) */
        await this.$nextTick();//返回promise对象
        this.$refs.myIpt.focus()

    }
},
}
</script>

<style>

</style>